<template>
	<div class="system-iotDeviceGroup-add">
		<!-- 注销申请审核 -->
		<el-dialog v-model="isShowDialog" width="500px" :close-on-click-modal="false" :destroy-on-close="true" center>
			<template #header>
				<div>注销申请审核</div>
			</template>
			<el-form ref="formRef" :model="formData" :rules="rules" label-width="90px" >
				<el-form-item label="电话号码" >
					<el-input v-model="formData.phone" disabled></el-input>
				</el-form-item>
				<el-form-item label="注销原因" >
					<el-input v-model="formData.reason" disabled></el-input>
				</el-form-item>
				<el-form-item label="备注" >
					<el-input v-model="formData.remark"  placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="onSubmit('REFUSE')" type="danger">审核拒绝</el-button>
					<el-button type="primary" @click="onSubmit('PASS')" :loading="loading" >审核通过</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref,  } from 'vue';
import { ElMessageBox, ElMessage, FormInstance, UploadProps } from 'element-plus';
import { auditWriteoffApi } from '@/api/numberManage/writeoff';
export default defineComponent({
	name: 'writeoff', //申请注销
	components: {},
	props: {
		seatUserList: {
			type: Array,
			default: () => []
		}
	},
	setup(props, { emit }) {
		const formRef = ref<HTMLElement | null>(null);
		const menuRef = ref();
		const state = reactive({
			loading: false,
			isShowDialog: false,
			formData: {
				id: undefined,
				reason:undefined,
				remark:undefined,
				phone:undefined,
			},
			// 表单校验
			rules: {
			},
		});
		// 打开弹窗
		const openDialog = (row) => {
			resetForm();
			state.formData= row
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 提交
		const onSubmit = (status) => {
			const formWrap = unref(formRef) as any;
			if (!formWrap) return;
			formWrap.validate((valid: boolean) => {
				if (valid) {
					state.loading = true;
					//修改
					let obj={
						id:state.formData.id,
						remark:state.formData.remark,
						status,
					}
					let txt=status=='PASS'?'通过':'拒绝'
					auditWriteoffApi(obj)
						.then(() => {
							ElMessage.success(`审核${txt}成功`);
							closeDialog(); // 关闭弹窗
							emit('getList');
						})
						.finally(() => {
							state.loading = false;
						});
				}
			});
		};
		const resetForm = () => {
			state.formData = {
				id: undefined,
				reason:undefined,
				remark:undefined,
				phone:undefined,
			};
		};
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			resetForm,
			menuRef,
			formRef,
			...toRefs(state),
		};
	},
});
</script>
<style scoped></style>
